<template>
    <div class="hot-board">
        <!-- 顶部栏 -->
        <div class="header-bar">
            <div class="header-left">
                <img class="hot-icon" src="https://so1.360tres.com/t01a815bd3d379e2381.jpg" alt="icon" />
                <div class="header-title">
                    <h2>今日热榜</h2>
                    <p class="sub-title">汇聚全网热点，热门榜单聚焦</p>
                </div>
            </div>
            <div class="header-right">
                <div class="time-block">
                    <div class="time-now">{{ currentTime }}</div>
                    <div class="time-desc">{{ lunarDate }}</div>
                </div>
                <div class="action-btns">
                    <button title="刷新"><i class="icon">⟳</i></button>
                    <button title="夜间模式"><i class="icon">🌙</i></button>
                    <button title="设置"><i class="icon">⚙️</i></button>
                </div>
            </div>
        </div>
        <div class="board-grid">
            <div class="board-card" v-for="(board, index) in boardList" :key="index">
                <!-- 标题栏 -->
                <div class="board-header">
                    <span class="board-title">{{ board.title }}</span>
                    <span class="board-tag">{{ board.tag }}</span>
                </div>

                <!-- 榜单内容（支持内部滚动） -->
                <ul class="board-items">
                    <li v-for="(item, i) in board.items" :key="i" class="board-item">
                        <span class="rank">{{ i + 1 }}</span>
                        <span class="text">{{ item }}</span>
                    </li>
                </ul>

                <!-- 底部信息 -->
                <div class="board-footer">
                    <span class="update-time">🕒 {{ getRelativeTime(board.lastUpdate) }}</span>
                    <i class="el-icon-refresh" @click="refreshBoard(index)" style="font-size: 18px;"></i>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            currentTime: '',
            timer: null,
            boardList: [
                {
                    title: "知乎",
                    tag: "热榜",
                    lastUpdate: new Date(Date.now() - 5 * 60 * 1000), // 5分钟前
                    items: [
                        "2025年度热词有哪些？", "AI 辅助编程进入主流了吗？", "为什么年轻人越来越喜欢简约生活？",
                        "知乎盐选内容增长报告", "程序员如何系统学习AI？", "有哪些值得收藏的知乎回答？",
                        "大学生如何规划职业路径？", "2025最受关注的科技趋势", "知乎高赞摄影作品集", "职场新人如何快速融入团队？"
                    ]
                },
                {
                    title: "抖音",
                    tag: "热榜",
                    lastUpdate: new Date(Date.now() - 60 * 60 * 1000), // 1小时前
                    items: [
                        "短剧播放量突破2000亿次", "DIY建房挑战赛爆火", "年度最火BGM合集",
                        "抖音电商成交额创新高", "网友自制AI短片登热榜", "旅行vlog最受欢迎榜单",
                        "百万粉丝创作者访谈", "挑战24小时无手机生活", "AI变脸技术引发热议", "宠物短视频人气榜TOP10"
                    ]
                },
                {
                    title: "百度",
                    tag: "热搜",
                    lastUpdate: new Date(Date.now() - 3 * 60 * 60 * 1000), // 3小时前
                    items: [
                        "2025年高考报名人数再创新高", "寒潮来袭全国气温骤降", "刘德华演唱会全程回放",
                        "新能源车销量突破新纪录", "中美科技企业合作消息", "年度十大热搜榜单发布",
                        "世界杯预选赛最新战况", "AI 搜索功能上线公测", "流感疫苗接种提醒", "春运购票系统升级完成"
                    ]
                },
                {
                    title: "36氪",
                    tag: "热榜",
                    lastUpdate: new Date(Date.now() - 2 * 60 * 60 * 1000),
                    items: [
                        "AI创业公司融资潮再起", "字节跳动新业务曝光", "SaaS行业迎来洗牌期",
                        "OpenAI 最新动态汇总", "消费科技投融资周报", "电商新趋势：兴趣推荐",
                        "创业者该如何抓住AI红利", "国内创投市场回暖信号", "Web3生态布局进展", "自动驾驶行业观察"
                    ]
                },
                {
                    title: "少数派",
                    tag: "热榜",
                    lastUpdate: new Date(Date.now() - 30 * 60 * 1000),
                    items: [
                        "本周值得关注的效率应用", "Android 15 Beta 体验报告", "macOS 15 实用技巧合集",
                        "App Store 年度榜单预测", "Notion 模板分享", "数字生活趋势观察",
                        "RSS 工具推荐合集", "如何打造高效工作环境", "少数派编辑精选文章", "设计师必备小工具清单"
                    ]
                },
                {
                    title: "IT之家",
                    tag: "热榜",
                    lastUpdate: new Date(Date.now() - 10 * 60 * 1000),
                    items: [
                        "小米15系列正式发布", "苹果M4芯片性能曝光", "Redmi K70 开售即售罄",
                        "WiFi 7 设备全面普及", "华为新系统Beta测试", "荣耀发布全新平板系列",
                        "英伟达AI显卡供不应求", "三星S25设计曝光", "AI手机拍照功能对比", "国内芯片量产进展"
                    ]
                }
            ]
        }
    },
    methods: {
        getRelativeTime(time) {
            const diff = (Date.now() - new Date(time)) / 1000
            if (diff < 60) return "刚刚更新"
            if (diff < 3600) return Math.floor(diff / 60) + "分钟前更新"
            if (diff < 86400) return Math.floor(diff / 3600) + "小时前更新"
            return Math.floor(diff / 86400) + "天前更新"
        },
        refreshBoard(index) {
            this.boardList[index].lastUpdate = new Date()
        },
        getRelativeTime(time) {
            const diff = (Date.now() - new Date(time)) / 1000
            if (diff < 60) return "刚刚更新"
            if (diff < 3600) return Math.floor(diff / 60) + "分钟前更新"
            if (diff < 86400) return Math.floor(diff / 3600) + "小时前更新"
            return Math.floor(diff / 86400) + "天前更新"
        },
        refreshBoard(index) {
            this.boardList[index].lastUpdate = new Date()
        },
        updateTime() {
            const now = new Date()
            const pad = n => n.toString().padStart(2, '0')
            const week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
            this.currentTime = `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())} ${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`
            this.lunarDate = `农历十月十三 ${week[now.getDay()]}` // 这里示意写死，可改成动态农历
        }
    },
    mounted() {
        this.updateTime()
        this.timer = setInterval(this.updateTime, 1000)
    },
    beforeDestroy() {
        clearInterval(this.timer)
    }
}
</script>

<style scoped>
/* ===== 顶部栏 ===== */
.header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 10px;
    padding: 10px 20px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
}

.header-left {
    display: flex;
    align-items: center;
}

.hot-icon {
    width: 36px;
    height: 36px;
    margin-right: 10px;
}

.header-title h2 {
    margin: 0;
    font-size: 20px;
    color: #222;
    font-weight: bold;
}

.sub-title {
    font-size: 12px;
    color: #888;
    margin: 2px 0 0 0;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.time-block {
    text-align: right;
}

.time-now {
    font-size: 14px;
    color: #333;
}

.time-desc {
    font-size: 12px;
    color: #888;
}

.action-btns {
    display: flex;
    gap: 10px;
}

.action-btns button {
    border: none;
    background: #f3f4f6;
    border-radius: 8px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    transition: background 0.2s;
}

.action-btns button:hover {
    background: #e1e3e8;
}

.icon {
    font-size: 18px;
}

.hot-board {
    padding: 20px;
    background: #f5f6fa;
    font-family: "Microsoft YaHei", sans-serif;
}

/* 标题栏 + 当前时间 */
.board-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

h2 {
    text-align: left;
    color: #333;
    font-size: 24px;
    margin-bottom: 20px;
}

.board-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
}

.current-time {
    font-size: 14px;
    color: #666;
    font-family: "Courier New", monospace;
}

/* 卡片样式 */
.board-card {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 320px;
    /* 固定高度 */
    transition: all 0.2s;
}

.board-card:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

/* 标题栏 */
.board-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.board-title {
    font-weight: bold;
    font-size: 18px;
    color: #222;
}

.board-tag {
    background: #f44336;
    color: white;
    font-size: 12px;
    border-radius: 4px;
    padding: 2px 6px;
}

/* 内容区域滚动 */
.board-items {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
    overflow-y: auto;
    /* 内部滚动 */
}

/* 滚动条样式 */
.board-items::-webkit-scrollbar {
    width: 6px;
}

.board-items::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 4px;
}

.board-items::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.3);
}

.board-item {
    display: flex;
    align-items: center;
    padding: 4px 0;
}

.rank {
    color: #f44336;
    font-weight: bold;
    margin-right: 8px;
    width: 18px;
}

.text {
    color: #333;
    flex: 1;
    font-size: 14px;
    line-height: 1.5;
    cursor: pointer;
}

.text:hover {
    color: #007bff;
}

/* 底部信息栏 */
.board-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #999;
    border-top: 1px solid #eee;
    margin-top: 10px;
    padding-top: 6px;
}

.update-btn {
    background: #007bff;
    border: none;
    color: white;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

.update-btn:hover {
    background: #0056b3;
}
</style>
